<template>
  <div class="transQuery_main">
    <a-form>
      <a-row :gutter="16">
        <a-col :span="4">
          <a-form-item>
            <a-input placeholder="会员编号" v-model="query.merchantMemberNo" />
          </a-form-item>
        </a-col>
        <!-- <a-col :span="4" :offset='1' style="padding:0;">
                    <a-form-item>
                        <a-input placeholder="会员账号" v-model="query.memberNo" />
                    </a-form-item>
        </a-col>-->
        <a-col :span="4" :offset="1" style="padding:0;">
          <a-form-item>
            <a-input placeholder="客户名称" v-model="query.memberName" />
          </a-form-item>
        </a-col>
        <a-col :span="4" :offset="1">
          <a-form-item>
            <a-select placeholder="审核状态" :options="SettleStatusList" v-model="query.status"></a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row style="margin-bottom: 20px;">
        <a-col :span="9" :style="{ textAlign: 'left' }">
          <a-row type="flex" justify="space-between">
            <a-col :span="6">
              <a-button
                class="button_sty"
                type="primary"
                :loading="loading"
                @click="handleSearch"
              >查询</a-button>
            </a-col>
            <a-col :span="6">
              <a-button class="button_sty" type="primary" @click="reset">重置</a-button>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </a-form>

    <a-table
      size="middle"
      :scroll="{ y: '38vh' }"
      :columns="columns"
      :dataSource="list"
      :pagination="false"
      :rowKey="record => record.transOrderNo"
    >
      <span slot="action" slot-scope="record">
        <span @click="goDetail(record.id)" style="color:#1890ff; cursor: pointer;">详细</span>
      </span>
    </a-table>
    <a-pagination
      @change="onPageChange"
      :current="pagination.current"
      :total="pagination.total"
      :pageSize="query.pageSize"
      style="margin-top: 20px"
    />
  </div>
</template>

<script>
import AForm from "ant-design-vue/es/form/Form";
import ATabs from "ant-design-vue/es/tabs";
import AFormItem from "ant-design-vue/es/form/FormItem";
import AInput from "ant-design-vue/es/input/Input";
import AIcon from "ant-design-vue/es/icon";
import AInputGroup from "ant-design-vue/es/input/Group";
import AButton from "ant-design-vue/es/button/button";
import ACol from "ant-design-vue/es/grid/Col";
import ARow from "ant-design-vue/es/grid/Row";
import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
import AAlert from "ant-design-vue/es/alert/index";
import moment from "moment";
import api from "@/common/api";
const ATabPane = ATabs.TabPane;

const columns = [
  {
    title: "会员编号",
    dataIndex: "merchantMemberNo",
    width: "16%",
    align: "center"
  },
  // { title: "会员账号", scopedSlots: { customRender: "transTime" }, width: '10%', align: 'center' },
  { title: "客户名称", dataIndex: "memberName", width: "16%", align: "center" },
  { title: "SN设备号", dataIndex: "sncode", width: "16%", align: "center" },
  { title: "申请时间", dataIndex: "ctime", width: "16%", align: "center" },
  { title: "审核状态", dataIndex: "statusName", width: "16%", align: "center" },
  {
    title: "操作",
    scopedSlots: { customRender: "action" },
    width: "16%",
    align: "center"
  }
];

export default {
  name: "Login",
  components: {
    AAlert,
    ACheckbox,
    ACol,
    ARow,
    AButton,
    AInputGroup,
    AIcon,
    AInput,
    AFormItem,
    ATabPane,
    ATabs,
    AForm
  },

  data() {
    return {
      today: new Date(),
      columns,
      isClear: false,
      momentDate: moment(new Date()),
      excelurl: "",
      statusList: [],
      SettleStatusList: [
        { value: null, label: "全部" },
        { value: "init", label: "待审核" },
        { value: "pass", label: "审核通过" },
        { value: "rejected", label: "审核不通过" }
      ],
      transTypeList: [],
      query: {
        merchantMemberNo: null,
        memberName: null,
        status: null,
        current: 1,
        pageSize: 10
      },
      pagination: { current: 1, total: 1, pageSize: 10 },
      visible: false,
      form: this.$form.createForm(this),
      error: "",
      loginpwd: "",
      loginpwd2: "",
      login: false,
      list: [],
      count: null,
      payedCount: null,
      totalAmount: null,
      loading: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 14, offset: 1 },
          md: { span: 14, offset: 1 }
        }
      }
    };
  },
  watch: {},
  filters: {
    timeFilter: function(value) {
      if (value) {
        let year = value.substring(0, 2);
        let mouth = value.substring(2, 4);
        let day = value.substring(4, 6);
        return year + ":" + mouth + ":" + day;
      }
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.handleSearch();
  },
  methods: {
    moment,
    onPageChange: function(page, pageSize) {
      console.info(page, pageSize);
      this.query.current = page;
      this.query.pageSize = pageSize;
      this.handleSearch();
    },
    onChange(dates, dateStrings) {
      // this.query.data.transDate = null;
      this.query.data.transDate = dateStrings;
      console.info(this.query.data.transDate);
    },
    reset() {
      this.query = {
        merchantMemberNo: null,
        memberName: null,
        status: null,
        current: 1,
        pageSize: 10
      };
    },
    handleSearch() {
      this.loading = true;
      console.info(this.query);
      this.$axios
        .post("/agent/log/terminal/queryList", this.query)
        .then(res => {
          console.info(res);
          this.loading = false;
          if (res.data.code == "OK") {
            this.list = res.data.list;
            this.pagination.current = res.data.current;
            this.pagination.total = res.data.total;
          } else {
            this.list = [];
            this.pagination.current = 1;
            this.pagination.total = 1;
            return false;
          }
        });
    },
    goDetail(id) {
      console.log(id);
      // this.$router.push(`/org/transmanage/${id}/transquerydetail`)
      this.$router.push(`/Terminal/terminalAuditQueryDetail/${id}`);
    }
  }
};
</script>

<style lang="less" scoped>
span {
  cursor: pointer;
}

span {
  cursor: pointer;
}

.formGroupTitle {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}

.ant-tabs-nav {
  float: right;
}

.amountColor {
  color: #29a576;
  font-weight: 400;
}

.amountSize {
  font-size: 20px;
  padding: 0 5px;
}

.expand {
  display: flex;
  align-items: center;
  justify-content: center;
}

.transQuery_main {
  padding: 70px;
  background: #fff;
}

.button_sty {
  width: 100%;
}
</style>